<template>
  <view class="container">
    <!-- 类型选择下拉框 -->
    <view class="type-selector">
      <view class="selector-container">
        <picker 
          @change="handleTypeChange" 
          :value="currentTypeIndex" 
          :range="videoTypes"
          range-key="videoType"
          class="type-picker"
        >
          <view class="picker-box">
            <text class="picker-text">{{currentType || '请选择视频类型'}}</text>
            <text class="picker-icon">▼</text>
          </view>
        </picker>
        <view class="reset-btn" @click="resetPage">
          重置
        </view>
      </view>
    </view>

    <!-- 视频列表 -->
    <view class="video-list">
      <view 
        class="video-item" 
        v-for="(item, index) in filteredVideos" 
        :key="index"
        @click="showVideoDetail(item)"
      >
        <text class="video-title">{{item.videoTitle}}</text>
        <text class="video-icon">▶</text>
      </view>
    </view>

    <!-- 视频详情 -->
    <view class="video-detail" v-if="currentVideo">
      <view class="detail-header">
        <text class="detail-title">{{currentVideo.videoTitle}}</text>
        <text class="close-btn" @click="closeVideo">×</text>
      </view>
      
      <!-- 视频封面或播放器 -->
      <view class="video-container">
        <!-- 封面图 -->
        <view class="video-cover" v-if="!isPlaying && currentVideo.videoImg" @click="startPlay">
          <image 
            :src="'/profile/upload/' + currentVideo.videoImg" 
            mode="aspectFill"
            class="cover-image"
          />
          <view class="play-icon">▶</view>
        </view>
        
        <!-- 视频播放器 -->
        <video 
          v-else
          :src="currentVideo.videoUrl"
          class="video-player"
          controls
          object-fit="cover"
          @ended="isPlaying = false"
        ></video>
      </view>
      
      <!-- 视频描述 -->
      <view class="video-description">
        <text class="description-title">视频简介</text>
        <text class="description-content">{{currentVideo.videoDescription || '暂无简介'}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [], // 所有视频数据
      videoTypes: [], // 视频类型列表
      currentTypeIndex: 0, // 当前选中的类型索引
      currentType: '', // 当前选中的类型
      currentVideo: null, // 当前选中的视频
      isPlaying: false // 是否正在播放视频
    }
  },
  computed: {
    // 根据选中类型过滤视频
    filteredVideos() {
      if (!this.currentType) return []
      return this.videoList.filter(video => video.videoType === this.currentType)
    }
  },
  onLoad() {
    this.loadVideoData()
  },
  methods: {
    // 加载视频数据
    loadVideoData() {
      this.request('loadVideo', 'GET').then(res => {
        if (res?.data) {
          this.videoList = res.data
          // 改进后的类型去重方式
          this.videoTypes = Array.from(
            new Map(
              res.data.map(item => [item.videoType, { videoType: item.videoType }])
            ).values()
          )
          // 更安全的默认选择逻辑
          if (this.videoTypes.length > 0) {
            this.currentType = this.videoTypes[0].videoType
            this.currentTypeIndex = 0
          }
        }
      }).catch(err => {
        console.error('加载视频数据失败：', err)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      })
    },
    // 处理类型选择
    handleTypeChange(e) {
      const index = e.detail.value
      this.currentTypeIndex = index
      this.currentType = this.videoTypes[index].videoType
      this.currentVideo = null
    },
    // 显示视频详情
    showVideoDetail(video) {
      this.currentVideo = video
      this.isPlaying = false
    },
    // 开始播放
    startPlay() {
      if (!this.currentVideo.videoUrl) {
        uni.showToast({
          title: '视频地址无效',
          icon: 'none'
        })
        return
      }
      this.isPlaying = true
    },
    // 关闭视频
    closeVideo() {
      this.currentVideo = null
      this.isPlaying = false
    },
    // 重置页面
    resetPage() {
      this.currentTypeIndex = 0
      this.currentType = this.videoTypes.length > 0 ? this.videoTypes[0].videoType : ''
      this.currentVideo = null
      this.isPlaying = false
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.type-selector {
  position: fixed;
  top: 100px;
  left: 20rpx;
  right: 20rpx;
  z-index: 100;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .selector-container {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .type-picker {
    flex: 1;
  }

  .picker-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
  }

  .picker-text {
    font-size: 28rpx;
    color: #333;
  }

  .picker-icon {
    color: #999;
    font-size: 24rpx;
  }

  .reset-btn {
    padding: 0 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #5177ee;
    color: white;
    border-radius: 8rpx;
    font-size: 28rpx;
    text-align: center;
    box-shadow: 0 2px 10px rgba(81, 119, 238, 0.2);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
      background: #4066d6;
    }
  }
}

.video-list {
  margin-top: calc(100px + 120rpx);
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 20rpx;
    border-bottom: 1px solid #eee;
    
    &:active {
      background-color: #f5f5f5;
    }

    .video-title {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }

    .video-icon {
      color: #666;
      font-size: 24rpx;
      margin-left: 20rpx;
    }
  }
}

.video-detail {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
  }

  .detail-title {
    color: #333;
    font-size: 32rpx;
    font-weight: bold;
    flex: 1;
    padding-right: 20rpx;
  }

  .video-container {
    width: 100%;
    height: 422rpx;
    background-color: #000;
    position: relative;
  }

  .video-cover {
    position: relative;
    width: 100%;
    height: 422rpx;
    background-color: #f0f0f0;
    
    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100rpx;
      height: 100rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      color: #fff;
      font-size: 50rpx;
      line-height: 100rpx;
      text-align: center;
    }
    
    &:active {
      .play-icon {
        background: rgba(0, 0, 0, 0.7);
      }
    }
  }

  .video-player {
    width: 100%;
    height: 100%;
  }

  .video-description {
    padding: 20rpx;
    
    .description-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .description-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}
</style>
